/*
 * @Author: 王坤
 * @Date: 2023.08.22
 * @Description:
 */
function MenuItem(props) {
  const { menuData, fieldsMap } = props;
  const { id, path: pathKey, label: labelKey, icon, children: childrenKey } = fieldsMap;
  if (!menuData) {
    return '';
  }
  const menuIcon = menuData[icon];
  const path = menuData[pathKey];
  const name = menuData[labelKey];
  const children = menuData[childrenKey] || [];
  const svgIcon = menuIcon && <svg-icon iconClass={menuIcon} isMenuIcon={true} style={{ marginRight: '6px' }} />;
  let renderData = (
    <el-menu-item key={menuData[id]} index={path} >
      {{
        title: () => (
          <>
            {svgIcon}
            <span>{name}</span>
          </>
        )
      }}
    </el-menu-item>
  );

  if (children.length) {
    renderData = (
      <el-sub-menu
        index={path}
        v-slots={{
          title: () => (
            <>
              {svgIcon}
              <span>{name}</span>
            </>
          )
        }}
      >
        {children.map((item) => {
          const key = item[id];
          const path = item[pathKey];
          return <MenuItem key={key} index={path} menuData={item} fieldsMap={fieldsMap} />;
        })}
      </el-sub-menu>
    );
  }
  return renderData;
}

MenuItem.props = {
  menuData: {
    type: Object,
    default: () => {}
  },
  fieldsMap: {
    default: () => ({}),
    type: Object
  }
};
export default MenuItem;
